<template>
  <!-- 前台商家页面 -->
  <div>
    <el-card>
    <!-- 模糊查框 添加按钮 -->
    <div class="abvoeBox">
        商家名称:<el-input placeholder="请输入商家名称" v-model="userName" class="abvoeBox_input"></el-input>
        <el-button type="primary" @click="selectUserProtalEntity()" style="margin-left:10px">查询</el-button>
    </div>
    <!-- 全查数据 -->
    <div class="belowBox">
       <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
            fixed
            prop="id"
            label="序号">
            </el-table-column>
            <el-table-column
            prop="userName"
            label="用户名称">
            </el-table-column>
            <el-table-column
            prop="nickName"
            label="用户名称">
            </el-table-column>
            <el-table-column
            prop="sex"
            label="性别">
            <template slot-scope="scope">
                <p>{{scope.row.sex===0?"男":"女"}}</p>
            </template>
            </el-table-column>
            <el-table-column
            prop="age"
            label="用户年龄">
            </el-table-column>
            <el-table-column
            prop="phone"
            label="用户电话">
            </el-table-column>
            <el-table-column
            prop="mail"
            label="用户邮箱">
            </el-table-column>
            <el-table-column
            prop="birthday"
            label="出生日期">
            </el-table-column>
            <el-table-column
            label="操作"
            width="300px"
            fixed="right">
            <template slot-scope="scope">
                <el-button type="primary" size="small" @click="selectUserProtalByRoleOne(scope.row)">查看</el-button>
                <el-button type="danger" size="small"  @click="deleteUserProtalById(scope.row.id)">删除</el-button>
                <el-button type="success" size="small" @click="openUpdateUserProtalDialogVisible(scope.row)">编辑</el-button>
            </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页 -->
    <div style="margin-top: 20px;">
        <template>
            <div class="block">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </template>
    </div>
    </el-card>
    <!-- 单查商家详情 -->
    <el-dialog
        title="详情"
        :visible.sync="selectUserProtalDialogVisible"
        width="40%"
        >
        <el-form :model="tableDataForm" ref="ruleForm"  label-width="100px" class="demo-ruleForm" style="text-align: left;">
            <el-form-item label="序号" >
                <el-input v-text="tableDataForm.id" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="用户名称">
                <el-input v-text="tableDataForm.userName" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="用户名称">
                <el-input v-text="tableDataForm.nickName" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="用户性别">
                <el-input v-text="tableDataForm.sex ===0?'男':'女'" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="用户年龄">
                <el-input v-text="tableDataForm.age" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="用户电话">
                <el-input v-text="tableDataForm.phone" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="用户邮箱">
                <el-input v-text="tableDataForm.mail" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="出生日期">
                <el-input v-text="tableDataForm.birthday" style="width: 200px;"></el-input>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!-- 修改弹窗 -->
    <el-dialog
        title="修改前端商家"
        :visible.sync="updateUserProtalDialogVisible"
        width="40%"
        >
        <!-- form表单 -->
        <el-form :model="tableDataForm" ref="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm" style="text-align: left;">
            <el-form-item label="用户名称" prop="userName">
                <el-input v-model="tableDataForm.userName" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="用户名称" prop="nickName">
                <el-input v-model="tableDataForm.nickName" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="用户性别" prop="sex">
                <el-radio-group v-model="tableDataForm.sex" style="width: 200px;margin-left:10px">
                      <el-radio :label="0">男</el-radio>
                      <el-radio :label="1">女</el-radio>
                    </el-radio-group>
            </el-form-item>
            <el-form-item label="用户年龄" prop="age">
                <el-input v-model="tableDataForm.age" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="出生日期" prop="birthday">
                <el-input v-model="tableDataForm.birthday" style="width: 200px;" type="date"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="updateUserProtalDialogVisible=false">取 消</el-button>
            <el-button type="primary" @click="updateUserEntityProtal('ruleForm')">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 表单规则
      rules: {
        userName: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 0, max: 20, message: '用户名称不能为空', trigger: 'blur' }
        ],
        nickName: [
          { required: true, message: '请输入用户昵称', trigger: 'blur' },
          { min: 0, max: 20, message: '用户昵称不能为空', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择用户性别', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入用户年龄', trigger: 'blur' }
        ],
        birthday: [
          { required: true, message: '请输入用户生日', trigger: 'blur' }
        ]
      },
      // 修改弹窗
      updateUserProtalDialogVisible: false,
      // 单查，修改结果集
      tableDataForm: [],
      // 单查弹窗
      selectUserProtalDialogVisible: false,
      // 模糊查询（商家名称）
      userName: '',
      // 全查后台用户表数据集
      tableData: [],
      // 分页 （pageSize）一页展示5条数据 （pageNum）当前页
      pageRequest: {
        pageSize: 5,
        pageNum: 1
      },
      // 分页 前往第1页
      currentPage: 1,
      // 分页
      total: 0
    }
  },
  mounted () {
    // 全查前台用户表（模糊查用户名称）
    this.selectUserProtalEntity()
  },
  methods: {
    // 删除用户
    deleteUserProtalById (data) {
      this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete('/eat-service/userProtal/deleteUserProtalById',
          {
            params: {
              id: data
            }
          }).then(res => {
          if (res.status === 200) {
            this.myMessage('success', '删除成功')
            this.selectUserProtalEntity()
          } else {
            this.myMessage('warning', '删除失败')
          }
        }).catch(res => {
          this.myMessage('erroe', '删除失败，请联系管理员')
        })
      }).catch(() => {
        this.myMessage('info', '已取消删除')
      })
    },
    // 修改
    updateUserEntityProtal (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const formData = new FormData()
          //   debugger
          formData.set('id', this.tableDataForm.id)
          formData.set('userName', this.tableDataForm.userName)
          formData.set('nickName', this.tableDataForm.nickName)
          formData.set('sex', this.tableDataForm.sex)
          formData.set('age', this.tableDataForm.age)
          formData.set('birthday', this.tableDataForm.birthday)
          this.$axios.post('/eat-service/userProtal/updateUserProtalEntity', formData
          ).then(res => {
            if (res.status === 200) {
              this.myMessage('success', '恭喜你，操作成功！') // 成功提示
              this.updateUserProtalDialogVisible = false // 关闭窗口
              this.selectUserProtalEntity()
            } else {
              this.myMessage('warning', res.data.obj) // 提示消息
            }
          }).catch(error => {
            console.log(error)
            this.myMessage('warning', '对不起，保存失败！')
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    openUpdateUserProtalDialogVisible (data) {
      this.updateUserProtalDialogVisible = true
      this.tableDataForm = JSON.parse(JSON.stringify(data))
    },
    // 单查用户详情
    selectUserProtalByRoleOne (data) {
      debugger
      this.selectUserProtalDialogVisible = true
      this.tableDataForm = data
    },
    // 全查前台用户表（模糊查用户名称）
    selectUserProtalEntity () {
      this.$axios.get('/eat-service/userProtal/getUserProtalByRoleTwo',
        {
          params: {
            userName: this.userName,
            pageSize: this.pageRequest.pageSize,
            pageNum: this.pageRequest.pageNum
          }
        }
      ).then(res => {
        this.tableData = res.data.content
        this.total = res.data.total
      }).catch(error => {
        console.log(error)
      })
    },
    // 分页 每页条数
    handleSizeChange (val) {
      this.pageRequest.pageSize = val
      this.selectUserProtalEntity()
    },
    // 分页 当前页
    handleCurrentChange (val) {
      this.pageRequest.pageNum = val
      this.selectUserProtalEntity()
    },
    // 弹窗提示
    myMessage (type, message) {
      this.$message({
        type: type,
        message: message
      })
    }
  }
}
</script>

<style>
    .abvoeBox{
        width: 100%;
        height: 60px;
        text-align: left;
        margin-top: 5px;
    }
    .abvoeBox_input{
        width: 200px;
        height: 50px;
        margin-left: 10px;
    }
    .belowBox{
        margin-top: 20px;
    }
    .p1{
      border: none;
      background: none;
    }
    .p1:hover{
      color: #31c27c;
    }
    .span1{
      margin-left: 5px;
      color: red;
    }
</style>
